import React, { Component } from 'react';
import { TabBar } from 'antd-mobile';
class TabBars extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'Home',
      hidden: false,
      fullScreen: false,
    }
  }
  category () {
    
  }
  render () {
    return(
      <div>
        <TabBar
            unselectedTintColor="#949494"
            tintColor="#ff083f"
            barTintColor="white"
            hidden={this.state.hidden}
          >
            <TabBar.Item
              title="Home"
              key="Home"
              icon={<div style={{
                width: '22px',
                height: '22px',
                background: 'url("https://ph-image-test.oss-ap-southeast-1.aliyuncs.com/avatar/Jri2QUq.5.png") center center /  21px 21px no-repeat' }}
              />
              }
              selectedIcon={<div style={{
                width: '22px',
                height: '22px',
                background: 'url(https://ph-image-test.oss-ap-southeast-1.aliyuncs.com/avatar/USd2QUq.5.png) center center /  21px 21px no-repeat' }}
              />
              }
              selected={this.state.selectedTab === 'Home'}
              onPress={() => {
                this.setState({
                  selectedTab: 'Home',
                });
                window.location.href = '#/index'
              }}
              data-seed="logId"
            >
            </TabBar.Item>
            <TabBar.Item
              icon={
                <div style={{
                  width: '22px',
                  height: '22px',
                  background: 'url(https://ph-image-test.oss-ap-southeast-1.aliyuncs.com/avatar/pqn2QUq.5.png) center center /  21px 21px no-repeat' }}
                />
              }
              selectedIcon={
                <div style={{
                  width: '22px',
                  height: '22px',
                  background: 'url(https://ph-image-test.oss-ap-southeast-1.aliyuncs.com/avatar/5Cx2QUq.5.png) center center /  21px 21px no-repeat' }}
                />
              }
              title="Category"
              key="Category"
              selected={this.state.selectedTab === 'Category'}
              onPress={() => {
                window.location.href = '#/category'
                this.setState({
                  selectedTab: 'Category',
                });
                console.log(this.props.history)
              }}
              data-seed="logId1"
            >
            </TabBar.Item>
            <TabBar.Item
              icon={
                <div style={{
                  width: '22px',
                  height: '22px',
                  background: 'url(https://ph-image-test.oss-ap-southeast-1.aliyuncs.com/avatar/Lur1QUq.5.png) center center /  21px 21px no-repeat' }}
                />
              }
              selectedIcon={
                <div style={{
                  width: '22px',
                  height: '22px',
                  background: 'url(https://ph-image-test.oss-ap-southeast-1.aliyuncs.com/avatar/g9A1QUq.5.png) center center /  21px 21px no-repeat' }}
                />
              }
              title="Cart"
              key="Cart"
              selected={this.state.selectedTab === 'Cart'}
              onPress={() => {
                this.setState({
                  selectedTab: 'Cart',
                });
                window.location.href = '#/cart'
              }}
            >
            </TabBar.Item>
            <TabBar.Item
              icon={{ uri: 'https://ph-image-test.oss-ap-southeast-1.aliyuncs.com/avatar/DPK2QUq.5.png' }}
              selectedIcon={{ uri: 'https://ph-image-test.oss-ap-southeast-1.aliyuncs.com/avatar/5803QUq.5.png' }}
              title="My"
              key="my"
              selected={this.state.selectedTab === 'My'}
              onPress={() => {
                this.setState({
                  selectedTab: 'My',
                });
                window.location.href = '#/my'
              }}
            >
            </TabBar.Item>
          </TabBar>
      </div>
    )
  }
}
export default TabBars;